import { BottomNavigation, BottomNavigationAction } from "@mui/material";
import React, { useEffect, useState } from "react";
import homeActiveIcon from "@/assets/images/tabbar/home_1.png"; // 激活的home
import homeIcon from "@/assets/images/tabbar/home_2.png"; // 未激活的home
import fastIcon from "@/assets/images/tabbar/fast.png"; // fast只有这一个
import myActiveIcon from "@/assets/images/tabbar/my_1.png"; // 我的 激活图标
import myIcon from "@/assets/images/tabbar/my_2.png"; // 我的 未激活图标
import "./bottomnav.less";
import { useLocation, useNavigate } from "react-router-dom";

const navPathes = ["/home", "/fast", "/mine"];

export default function BottomNav() {
  const [curPage, setCurPage] = useState(0);
  const navigate = useNavigate();

  // 判断是否是 home / fast /  mine 这三个路由，如果是，就显示，否则就隐藏
  const { pathname } = useLocation();
  // 有一个是否显示的状态
  const [isShow, setIsShow] = useState(true);
  useEffect(() => {
    setIsShow(navPathes.includes(pathname));
  }, [pathname]);

  return (
    <div className="bottom-nav" style={{ display: isShow ? "block" : "none" }}>
      <BottomNavigation
        showLabels
        value={curPage}
        onChange={(event, newValue) => {
          setCurPage(newValue);
          //在点击里面进行跳转 - 思路1： 一个一个索引判断，根据索引跳转到不同的页面
          // 思路2： 使用一个数组把path存起来，每次跳转根据索引去去path就行
          navigate(navPathes[newValue]);
        }}
      >
        <BottomNavigationAction
          label="首页"
          icon={
            <NavIcon
              isActive={curPage === 0}
              activeIcon={homeActiveIcon}
              icon={homeIcon}
            />
          }
        />
        <BottomNavigationAction
          label="快速刷题"
          icon={
            <NavIcon
              isActive={curPage === 1}
              activeIcon={fastIcon}
              icon={fastIcon}
            />
          }
        />
        <BottomNavigationAction
          label="我的"
          icon={
            <NavIcon
              isActive={curPage === 2}
              activeIcon={myActiveIcon}
              icon={myIcon}
            />
          }
        />
      </BottomNavigation>
    </div>
  );
}
interface NavIconProp {
  isActive: boolean;
  activeIcon: string; // 传入的激活的图标
  icon: string; // 传入的未激活的图标
}

// 通过子组件封装 返回对应的图片给 BottomNavigationAction 的 Icon
function NavIcon(props: NavIconProp) {
  // 判断 当前是否是激活状态，如果 是 返回图片1，否则返回图片2
  if (props.isActive) {
    return <img src={props.activeIcon} alt="" />;
  } else {
    return <img src={props.icon} />;
  }
}
